import React from 'react';
import { Card, Button, Space } from 'antd';
import DesignerPage from './DesignerPage';

export default function TestDesigner() {
  return (
    <div style={{ padding: 20 }}>
      <Card title="低代码页面设计器测试">
        <Space direction="vertical" style={{ width: '100%' }}>
          <div>
            <h3>功能说明：</h3>
            <ul>
              <li>左侧面板：组件库、数据源管理、页面结构树</li>
              <li>中间画布：拖拽组件、编辑布局</li>
              <li>右侧面板：组件属性配置</li>
              <li>工具栏：保存、预览、导出等功能</li>
            </ul>
          </div>
          <div>
            <h3>使用步骤：</h3>
            <ol>
              <li>点击左侧组件面板中的组件添加到画布</li>
              <li>在画布中点击组件进行选中</li>
              <li>在右侧属性面板中编辑组件属性</li>
              <li>使用工具栏的保存、预览等功能</li>
            </ol>
          </div>
        </Space>
      </Card>
      
      <div style={{ marginTop: 20 }}>
        <DesignerPage />
      </div>
    </div>
  );
} 